<template>
	<view>
		<view class="top_nav_box">
			<navigation-custom :config="config" @customConduct="customConduct" />
		</view>
		<view class="page_item_bj"></view>
		<view class="page_content_box">
			<view :style="{height:statusHeight+'px'}"></view>
			<view class="auth_step_img">
				<image src="../../static/images/auth_step1.png" mode=""></image>
			</view>
			<view class="auth_step_info_box">
				<view class="auth_step_info_title"><text>身份信息</text></view>
				<view class="phone_login_input_box">
					<view class="phone_login_input_name">姓名</view>
					<view class="phone_login_input_inp">
						<input type="text" :focus="true" @input="onNameInput" v-model="name" maxlength="10" placeholder="请输入姓名"/>
					</view>
				</view>
				<view class="phone_login_input_box">
					<view class="phone_login_input_name">身份证号</view>
					<view class="phone_login_input_inp">
						<input type="idcard"  v-model="idcard" maxlength="18" placeholder="请输入身份证号"/>
					</view>
				</view>
				<view class="phone_login_input_box">
					<view class="phone_login_input_name">有效期至</view>
					<view class="pick_box">
						 <picker mode="date" @change="bindDateChange" :value="date" :start="startDate" :end="endDate">
						    <view class="pick_input pick_input1"  v-if="date==null">请选择有效期</view>
							<view class="pick_input" v-if="date!=null">{{date}}</view>
						 </picker>
						 <view class="pick_img">
							<image src="https://www.cccshansong.com/chong_weapp/auth_bottom.png" mode=""></image>
						 </view>
					</view>
				</view>
			</view>
			<view class="auth_step_info_box" style="height: 392rpx;">
				<view class="auth_step_info_title"><text>上传身份证</text></view>
				<view class="cargo_img_box">
					<view class="cargo_img_item_box" style="margin-right: 18rpx;" @click="handleUpload()">
						<view class="cargo_img_item_tip" hover-class="hover_class" v-if="idcard_url1==''">
							<view class="cargo_img_item_tip_img">
								<image src="https://www.cccshansong.com/chong_weapp/idcard1.png" mode=""></image>
							</view>
							<view class="cargo_img_item_tip_text">上传人像面</view>
						</view>
						<view class="cargo_img_item_img_box" v-if="idcard_url1!=''">
							<image :src="idcard_url1" mode="aspectFill"></image>
							<view class="cargo_img_item_img_del" @click.stop="handleUploadDel()">x</view>
						</view>
					</view>
					<view class="cargo_img_item_box" @click="handleUpload1()">
						<view class="cargo_img_item_tip" hover-class="hover_class" v-if="idcard_url2==''" >
							<view class="cargo_img_item_tip_img">
								<image src="https://www.cccshansong.com/chong_weapp/idcard2.png" mode=""></image>
							</view>
							<view class="cargo_img_item_tip_text">上传国徽面</view>
						</view>
						<view class="cargo_img_item_img_box" v-if="idcard_url2!=''">
							<image :src="idcard_url2" mode="aspectFill"></image>
							<view class="cargo_img_item_img_del" @click.stop="handleUploadDel1()">x</view>
						</view>
					</view>
				</view>
			</view>
			<view class="auth_step_info_box" style="height: 392rpx;">
				<view class="auth_step_info_title"><text>上传健康证</text></view>
				<view class="cargo_img_box" style="justify-content:flex-start;margin-left: 20rpx;">
					<view class="cargo_img_item_box" style="margin-right: 18rpx;"  @click="handleUploadHealth()">
						<view class="cargo_img_item_tip" hover-class="hover_class" v-if="health_url==''">
							<view class="cargo_img_item_tip_img">
								<image src="https://www.cccshansong.com/chong_weapp/htz-image-img.png" mode="" style="width: 110rpx;height: 110rpx;"></image>
							</view>
							<view class="cargo_img_item_tip_text">上传健康证</view>
						</view>
						<view class="cargo_img_item_img_box" v-if="health_url!=''">
							<image :src="health_url" mode="aspectFill"></image>
							<view class="cargo_img_item_img_del" @click.stop="handleUploadHealthDel()">x</view>
						</view>
					</view>
				</view>
			</view>
			<view style="height: 220rpx;"></view>
		</view>
		<view class="record_fix_box">
			<view class="record_fix_btn" hover-class="hover_class" @click="handleSubmit()">下一步</view>
		</view>
		<yk-authpup ref="authpup" type="top" :isNativeHead='false'  @changeAuth="changeAuth" :permissionID="permissionID"></yk-authpup>
		<yk-authpup ref="authpupAlbum" type="top" :isNativeHead='true' @changeAuth="changeAuthAlbum" :permissionID="permissionID"></yk-authpup>
		<yk-authpup ref="authpup1" type="top" :isNativeHead='false'  @changeAuth="changeAuth1" :permissionID="permissionID"></yk-authpup>
		<yk-authpup ref="authpupAlbum1" type="top" :isNativeHead='true' @changeAuth="changeAuthAlbum1" :permissionID="permissionID"></yk-authpup>
		<yk-authpup ref="authpup2" type="top" :isNativeHead='false'  @changeAuth="changeAuth2" :permissionID="permissionID"></yk-authpup>
		<yk-authpup ref="authpupAlbum2" type="top" :isNativeHead='true' @changeAuth="changeAuthAlbum2" :permissionID="permissionID"></yk-authpup>
	</view>
</template>

<script>
	import ykAuthpup from "@/components/yk-authpup/yk-authpup";
	import navigationCustom from "@/components/struggler-navigationCustom/navigation-custom.vue"
	export default {
		components: {
			navigationCustom,
			ykAuthpup
		},
		data() {
			return {
				permissionID:'',
				health_url:'',
				is_info:0,
				sex:1,
				idcard_url1:'',
				idcard_url2:'',
				action_url:'',
				btn_status:true,
				date: null,
				name:'',
				idcard:'',
				statusHeight:0,
				config: {
					title: "实名认证", //title
					bgcolor: "transparent", //背景颜色
					fontcolor: "#fff", //文字颜色，默认白色
					type: 4, //type 1，3胶囊 2，4无胶囊模式
					transparent: false, //是否背景透明 默认白色
					linear: false, //是为开启下滑渐变
					share: false, //是否将主页按钮显示为分享按钮
					menuIcon: "../../static/icon/back2.png", //当type为3或者4的时候左边的icon文件位置，注意位置与当前页面不一样
					// menuText:"返回", //当type为3或4的时候icon右边的文字
				},
			};
		},
		onLoad(e) {
			var a = this
			a.action_url = a.globalurl + 'common/image_upload'
			a.statusHeight = uni.getSystemInfoSync().statusBarHeight  + 36
			if(e.type){
				a.getUserInfo()
				a.is_info = 1
			}
		},
		computed: {
		    startDate() {
		        return this.getDate('start');
		    },
		    endDate() {
		        return this.getDate('end');
		    }
		},
		onPageScroll(res) {
			var a = this
			if (0 < res.scrollTop <= 60) {
				a.config.bgcolor = 'rgba(65, 138, 255,0)'
			}
			if (40 < res.scrollTop <= 120) {
				a.config.bgcolor = 'rgba(65, 138, 255,0.2)'
			}
			if (60 < res.scrollTop <= 220) {
				a.config.bgcolor = 'rgba(65, 138, 255,0.4 )'
			}
			if (res.scrollTop > 220) {
				a.config.bgcolor = 'rgba(65, 138, 255,1)'
			}
			if (res.scrollTop == 0) {
				a.config.bgcolor = 'rgba(65, 138, 255,0)'
			}
		},
		methods: {
			getUserInfo(){
				var a =this
				uni.showLoading({
					title:'加载中'
				})
				a.globalajax('user/info',{
					},'GET',function(res) {
						console.log(res);
						uni.hideLoading()
						uni.stopPullDownRefresh()
						if(res.data.code==200){
							if(res.data.data.info){
								a.name = res.data.data.info.name
								a.idcard = res.data.data.info.id_card_number
								a.date = res.data.data.info.period
								a.idcard_url1 = res.data.data.info.id_card
								a.idcard_url2 = res.data.data.info.idcard_reverse
								a.sex = res.data.data.info.gender
								a.health_url = res.data.data.info.health
							}
						}else{
							a.$showModal({
								title:'友情提示',
								content:res.data.msg,
								showCancel:false,
								confirmText:'我知道了',
								success: (res) => {
								}
							});
						}
					}
				);
			},
			handleUploadDel(){
				var a = this
				a.idcard_url1 = ''
			},
			getCardInfo(){
				var a =this
				uni.showLoading({
					title:'正在识别'
				})
				a.globalajax('user/cardIdentification',{
						image:a.idcard_url1,
					},'POST',function(res) {
						console.log(res);
						uni.hideLoading()
						uni.stopPullDownRefresh()
						if(res.data.code==200){
							a.name = res.data.data.Name
							a.idcard = res.data.data.IdNum
							if(res.data.data.Sex=='男'){
								a.sex = 1
							}else{
								a.sex = 0
							}
						}else{
							a.$showModal({
								title:'友情提示',
								content:res.data.msg,
								showCancel:false,
								confirmText:'我知道了',
								success: (res) => {
								}
							});
						}
					}
				);
			},
			getCardInfo1(){
				var a =this
				uni.showLoading({
					title:'正在识别'
				})
				a.globalajax('user/cardIdentification',{
						image:a.idcard_url2,
					},'POST',function(res) {
						console.log(res);
						uni.hideLoading()
						uni.stopPullDownRefresh()
						if(res.data.code==200){
							var temp_date = res.data.data.ValidDate
							var datePart = temp_date.split('-')[1];
							var formattedDate = datePart.replace(/\./g, '-');
							a.date = formattedDate
						}else{
							a.$showModal({
								title:'友情提示',
								content:res.data.msg,
								showCancel:false,
								confirmText:'我知道了',
								success: (res) => {
								}
							});
						}
					}
				);
			},
			//打开自定义权限目的弹框
			openAuth(permissionID){
				this.permissionID = permissionID;//这个是对应的权限 ACCESS_FINE_LOCATION 位置权限 / WRITE_EXTERNAL_STORAGE 存储空间/照片权限 / CAMERA相机权限 / CALL_PHONE 拨打电话
				setTimeout(()=>{
					this.$refs['authpup'].open();
				},500)
			},
			openAuthAlbum(permissionID){
				this.permissionID = permissionID;//这个是对应的权限 ACCESS_FINE_LOCATION 位置权限 / WRITE_EXTERNAL_STORAGE 存储空间/照片权限 / CAMERA相机权限 / CALL_PHONE 拨打电话
				setTimeout(()=>{
					this.$refs['authpupAlbum'].open();
				},500)
			},
			//用户授权权限后的回调
			changeAuth(){
				//这里是权限通过后执行自己的代码逻辑
				console.log('相机权限已授权，可执行自己的代码逻辑了');
				this.openAuthAlbum('WRITE_EXTERNAL_STORAGE')
			},
			changeAuthAlbum(){
				//这里是权限通过后执行自己的代码逻辑
				console.log('相册权限已授权，可执行自己的代码逻辑了');
				this.handleUploadAuth()
			},
			handleUpload(){
				var a = this
				a.openAuth('CAMERA')
			},
			handleUploadAuth(){
				var a = this
				var token = uni.getStorageSync('token');
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'],
					success: (res) => {
						var tempFilePaths = res.tempFilePaths[0]
						uni.showLoading({
							title: '上传中'
						});
						uni.uploadFile({
							url: a.action_url,
							filePath: tempFilePaths,
							fileType: 'image',
							name: 'file',
							header: {
							  'Accept': 'application/json',
							  'content-type': 'application/json',
							  'Authorization':'Bearer ' + token
							},
							success: (uploadFileRes) => {
								uni.hideLoading();
							    console.log(JSON.parse(uploadFileRes.data));
								a.idcard_url1 = JSON.parse(uploadFileRes.data).data.complete_url
								a.getCardInfo()
							},
							fail: (err) => {
								uni.hideLoading();
								console.log(err);
							},
						})
					}
				});
			},
			handleUploadHealthDel(){
				var a = this
				a.health_url = ''
			},
			handleUploadDel1(){
				var a = this
				a.idcard_url2 = ''
			},
			handleUploadHealth(){
				var a = this
				a.openAuth2('CAMERA')
			},
			//打开自定义权限目的弹框
			openAuth2(permissionID){
				this.permissionID = permissionID;//这个是对应的权限 ACCESS_FINE_LOCATION 位置权限 / WRITE_EXTERNAL_STORAGE 存储空间/照片权限 / CAMERA相机权限 / CALL_PHONE 拨打电话
				setTimeout(()=>{
					this.$refs['authpup2'].open();
				},500)
			},
			openAuthAlbum2(permissionID){
				this.permissionID = permissionID;//这个是对应的权限 ACCESS_FINE_LOCATION 位置权限 / WRITE_EXTERNAL_STORAGE 存储空间/照片权限 / CAMERA相机权限 / CALL_PHONE 拨打电话
				setTimeout(()=>{
					this.$refs['authpupAlbum2'].open();
				},500)
			},
			//用户授权权限后的回调
			changeAuth2(){
				//这里是权限通过后执行自己的代码逻辑
				console.log('相机权限已授权，可执行自己的代码逻辑了');
				this.openAuthAlbum2('WRITE_EXTERNAL_STORAGE')
			},
			changeAuthAlbum2(){
				//这里是权限通过后执行自己的代码逻辑
				console.log('相册权限已授权，可执行自己的代码逻辑了');
				this.handleUploadHealthAuth()
			},
			handleUploadHealthAuth(){
				var a = this
				var token = uni.getStorageSync('token');
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'],
					success: (res) => {
						var tempFilePaths = res.tempFilePaths[0]
						uni.showLoading({
							title: '上传中'
						});
						uni.uploadFile({
							url: a.action_url,
							filePath: tempFilePaths,
							fileType: 'image',
							name: 'file',
							header: {
							  'Accept': 'application/json',
							  'content-type': 'application/json',
							  'Authorization':'Bearer ' + token
							},
							success: (uploadFileRes) => {
								uni.hideLoading();
							    console.log(JSON.parse(uploadFileRes.data));
								a.health_url = JSON.parse(uploadFileRes.data).data.complete_url
							},
							fail: (err) => {
								uni.hideLoading();
								console.log(err);
							},
						})
					}
				});
			},
			//打开自定义权限目的弹框
			openAuth1(permissionID){
				this.permissionID = permissionID;//这个是对应的权限 ACCESS_FINE_LOCATION 位置权限 / WRITE_EXTERNAL_STORAGE 存储空间/照片权限 / CAMERA相机权限 / CALL_PHONE 拨打电话
				setTimeout(()=>{
					this.$refs['authpup1'].open();
				},500)
			},
			openAuthAlbum1(permissionID){
				this.permissionID = permissionID;//这个是对应的权限 ACCESS_FINE_LOCATION 位置权限 / WRITE_EXTERNAL_STORAGE 存储空间/照片权限 / CAMERA相机权限 / CALL_PHONE 拨打电话
				setTimeout(()=>{
					this.$refs['authpupAlbum1'].open();
				},500)
			},
			//用户授权权限后的回调
			changeAuth1(){
				//这里是权限通过后执行自己的代码逻辑
				console.log('相机权限已授权，可执行自己的代码逻辑了');
				this.openAuthAlbum1('WRITE_EXTERNAL_STORAGE')
			},
			changeAuthAlbum1(){
				//这里是权限通过后执行自己的代码逻辑
				console.log('相册权限已授权，可执行自己的代码逻辑了');
				this.handleUpload1Auth()
			},
			handleUpload1(){
				var a = this
				a.openAuth1('CAMERA')
			},
			handleUpload1Auth(){
				var a = this
				var token = uni.getStorageSync('token');
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'],
					success: (res) => {
						var tempFilePaths = res.tempFilePaths[0]
						uni.showLoading({
							title: '上传中'
						});
						uni.uploadFile({
							url: a.action_url,
							filePath: tempFilePaths,
							fileType: 'image',
							name: 'file',
							header: {
							  'Accept': 'application/json',
							  'content-type': 'application/json',
							  'Authorization':'Bearer ' + token
							},
							success: (uploadFileRes) => {
								uni.hideLoading();
							    console.log(JSON.parse(uploadFileRes.data));
								a.idcard_url2 = JSON.parse(uploadFileRes.data).data.complete_url
								a.getCardInfo1()
							},
							fail: (err) => {
								uni.hideLoading();
								console.log(err);
							},
						})
					}
				});
			},
			onNameInput(event){
				console.log(event.target.value)
				if(event.target.value.length==10){
					uni.showToast({
						title:'姓名已达到字数限制',
						icon:'none'
					})
				}
			},
			handleSubmit(){
				var a = this
				if(a.name==''){
					uni.showToast({
						title:'请输入您的姓名',
						icon:'none'
					})
				}else if(a.idcard==''){
					uni.showToast({
						title:'请输入身份证号',
						icon:'none'
					})
				}else if(a.idcard.length!=18){
					uni.showToast({
						title:'身份证号位数不足18位',
						icon:'none'
					})
				}else if(!/^[1-9][0-9]{5}(19|20)[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}([0-9]|x|X)$/.test(a.idcard)){
					uni.showToast({
						title:'身份证号格式不正确',
						icon:'none'
					})
				}else if(a.date==null){
					uni.showToast({
						title:'请选择出生日期',
						icon:'none'
					})
				}else if(a.idcard_url1==''){
					uni.showToast({
						title:'请上传身份证人像面',
						icon:'none'
					})
				}else if(a.idcard_url2==''){
					uni.showToast({
						title:'请上传身份证国徽面',
						icon:'none'
					})
				}else if(a.health_url==''){
					uni.showToast({
						title:'请上传健康证',
						icon:'none'
					})
				}else{
					var temp_obj = {
						sex:a.sex,
						name:a.name,
						idcard:a.idcard,
						date:a.date,
						idcard_url1:a.idcard_url1,
						idcard_url2:a.idcard_url2,
						health:a.health_url
					}
					uni.setStorage({
					  key: 'auth_info',
					  data: temp_obj,
					  success() {
					   if(a.is_info==1){
						   uni.navigateTo({
						   	url:'/pages/user/auth2?type=1'
						   })
					   }else{
						  uni.navigateTo({
						  	url:'/pages/user/auth2'
						  })
					   }

					  },
					});
				}
			},
			getDate(type) {
			    const date = new Date();
			    let year = date.getFullYear();
			    let month = date.getMonth() + 1;
			    let day = date.getDate();

			    if (type === 'start') {
			        year = year;
			    } else if (type === 'end') {
			        year = year + 100;
			    }
			    month = month > 9 ? month : '0' + month;;
			    day = day > 9 ? day : '0' + day;
			    return `${year}-${month}-${day}`;
			},
			customConduct() {
				uni.navigateBack({
					delta: 1
				})
			},
			bindDateChange: function(e) {
			    this.date = e.detail.value
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f6f8;
	}
	.top_nav_box {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
	}
	.page_item_bj {
		width: 750rpx;
		height:644rpx;

		background-image: url('../../static/images/png03.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
	}
	.page_content_box{
		width: 750rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index:1;
		.auth_step_img{
			width: 656rpx;
			height: 108rpx;
			margin: 0 auto;
			margin-top: 30rpx;
			margin-bottom:40rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.auth_step_info_box{
			width: 686rpx;
			height: 450rpx;
			background-color: #fff;
			margin: 0 auto;
			border-radius: 12rpx;
			margin-bottom: 20rpx;
			.auth_step_info_title{
				height: 96rpx;
				line-height: 96rpx;
				border-bottom: 2rpx solid rgba(235, 238, 245, 1);
				margin-bottom: 30rpx;
				text{
					color: rgba(48, 49, 51, 1);
					font-size: 32rpx;
					margin-left: 24rpx;
					font-weight: bold;
				}
			}
			.cargo_img_box{
				display: flex;
				align-items: center;
				justify-content: center;
				padding-bottom: 20rpx;
				.cargo_img_item_box{
					width: 312rpx;
					height: 232rpx;
					border-radius: 12rpx;
					background: rgba(245, 246, 248, 1);
					border: 2rpx solid rgba(228, 231, 237, 1);
					.cargo_img_item_img_box{
						width: 312rpx;
						height: 232rpx;
						border-radius: 12rpx;
						background: rgba(245, 246, 248, 1);
						position: relative;
						.cargo_img_item_img_del{
							background-color: #f5222d;
							font-size: 24rpx;
							position: absolute;
							width: 35rpx;
							height: 35rpx;
							line-height: 35rpx;
							text-align: center;
							top: 0;
							right: 0;
							z-index: 7;
							color: #fff;
							border-radius:0 10rpx 0 0;
						}
						image{
							width: 100%;
							height: 100%;
							border-radius: 12rpx;
						}
					}
					.cargo_img_item_tip{
						.cargo_img_item_tip_text{
							width: 312rpx;
							height: 56rpx;
							border-radius: 0rpx 0rpx 12rpx 12rpx;
							background: rgba(65, 138, 255, 0.1);
							text-align: center;
							line-height: 56rpx;
							color:#418AFF;
							font-size: 28rpx;
						}
						.cargo_img_item_tip_img{
							height:178rpx;
							width: 312rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							image{
								width: 150rpx;
								height: 100rpx;
							}
						}

					}

				}
			}
			.phone_login_input_box{
				width:638rpx;
				height: 88rpx;
				border-radius: 16rpx;
				background: #F5F6F8;
				margin: 0 auto;
				display: flex;
				margin-bottom: 20rpx;
				.pick_box{
					position: relative;
					font-size: 28rpx;
					width: 434rpx;
					height: 88rpx;
					.pick_img{
						width: 56rpx;
						height: 56rpx;
						margin-left:396rpx;
						image{
							width: 44rpx;
							height: 44rpx;
							margin-top:24rpx;
						}
					}
					picker{
						z-index: 9;
						position: absolute;
						top: 0;
						left: 0;
						width: 434rpx;
						height: 88rpx;
						.pick_input{
							height: 88rpx;
							line-height: 88rpx;
							text-align: left;
							font-size: 30rpx;
						}
						.pick_input1{
							font-size: 30rpx;
							color: #808080;
						}
					}
				}
				.phone_login_input_name{
					width: 156rpx;
					height: 88rpx;
					padding-left: 24rpx;
					line-height: 88rpx;
					color: #303133;
					font-size: 30rpx;
					font-weight: bold;
				}
				.phone_login_input_inp{
					width: 434rpx;
					height: 88rpx;
					position: relative;
					.reg_form_item_pwd{
						width: 60rpx;
						height: 60rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						position: absolute;
						top: 13rpx;
						right: 12rpx;
						image{
							width: 33rpx;
							height: 33rpx;
						}
					}
					.phone_login_input_code{
						position: absolute;
						top: 13rpx;
						right: 12rpx;
						color: rgba(255, 107, 0, 1);
						font-size: 28rpx;
						z-index: 90;
						width: 190rpx;
						height: 64rpx;
						text-align: center;
						line-height: 64rpx;
						border-radius: 12rpx;
						background-color: rgba(255, 122, 0, 0.1);
					}
					input{
						height: 88rpx;
						line-height: 88rpx;
						font-size: 30rpx;
					}
				}
			}
		}
	}
	.record_fix_box{
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 9;
		width: 750rpx;
		padding-top: 16rpx;
		box-shadow: 0rpx 0rpx 26rpx 0rpx rgba(0,0,0,0.0800);
		padding-bottom: calc(16rpx +  constant(safe-area-inset-bottom));
		padding-bottom: calc(16rpx +  env(safe-area-inset-bottom));
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		.record_fix_btn{
			width: 690rpx;
			height: 80rpx;
			opacity: 1;
			border-radius: 16rpx;
			background:#418AFF;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: 30rpx;
		}
	}
</style>
